<template>
  <div class="good">
    <h2>猜你喜欢</h2>
    <span v-for="(item,index) in List" :key="index" @click="dianji(index)" :class="{'active':active==index}">{{item}}</span>
    <div class="til">
            <span v-for="(item,index) in arr" :key="index">{{item}}</span>
    </div>
    <div class="big">
            <div class="good" v-for="(item,index) in good" :key="index">
                <div class="left">
                    <img :src="item.img" alt="">
                </div>
                <div class="right">
                    <h3>{{item.title}}</h3>
                    <p>
                        <span class="xing">★{{item.fen}}</span>
                        <span>月售{{item.nums}}</span>
                    </p>
                    <p>
                        <span>起送￥{{item.price}}</span>
                        <span>{{item.min}}分钟</span>
                        <span>{{item.far}}km</span>
                    </p>
                    <span class="manjian" v-for="(item,index) in jian" :key="index">{{item}}</span>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import p1 from "../assets/good1.jpg"
import p2 from "../assets/good2.png"
import p3 from "../assets/good3.png"

export default {
data(){
    return {
        active:0,
    List:["综合排序","距离最近","销量最高","筛选"],
    arr: ["年货节热卖", "津贴联盟", "满减优惠", "品质联盟"],
        good: [
            {
                img: p1,
                title: '黄焖鸡米饭(赛格店)',
                fen: '4.6',
                nums: '20',
                price: '15',
                min: '35',
                far: '3.4',

            },
            {
                img: p2,
                title: '龙记猪脚饭',
                fen: '4.6',
                nums: '200',
                price: '12',
                min: '30',
                far: '1.6',
            },
            {
                img: p3,
                title: '过桥米线',
                fen: '4.2',
                nums: '100',
                price: '8',
                min: '22',
                far: '1.2',
            }
        ],
        jian: ["35减12", "75减35", "100减45", "150减60"]
    }
},
methods:{
    dianji(index) {
            this.active = index;
            if (index == 1) {
                this.good.sort(
                    (a, b) => {
                        return (a.far / 1 < b.far / 1 ? -1 : (a.far / 1 > b.far / 1) ? 1 : 0)
                    }
                )
            } else if (index == 2) {
                this.good.sort(
                    (a, b) => {
                        return (a.nums / 1 > b.nums / 1 ? -1 : (a.nums / 1 < b.nums / 1) ? 1 : 0)
                    }
                )
            }
        }
}
}
</script>

<style lang="scss" scoped>
.list {
    width: 100%;
    height: auto;
    padding: 8px 10px;
    box-sizing: border-box;
}
.good>span {
    margin: 10px 15px;
    display: inline-block;
}
.big {
    padding-bottom: 50px;
}
span:nth-child(1){
    margin-left: 0;
}
.active {
    font-weight: bold;
    font-size: 17px;
}
.til {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 5px 6px;
}

.til span {
    display: inline-block;
    background: rgb(175, 170, 170);
    margin: 0 6px;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    color: #333;
    opacity: 0.7;
    border-radius: 6px;
    width: 21%;
    height: 22px;
}
.good {
    width: 100%;
    height: 120px;
    padding: 0 10px;
    box-sizing: border-box;
}

.good .left {
    float: left;
}

.good .right {
    float: left;
    margin-left: 10px;
}

.good .right h3 {
    margin-bottom: 10px;
}

.good .right .manjian {
    display: inline-block;
    border: 1px solid red;
    color: red;
    margin-right: 4px;
    font-size: 10px;
    padding: 2px;
}

.good .right p:last-child {
    display: flex;
    justify-content: space-between;
}

.good .right span {
    color: #999;
    font-size: 12px;
}

.good .right .xing {
    color: orange;
}

.good img {
    width: 97px;
    height: 97px;
}

.big {
    width: auto;
    height: auto;
    margin-bottom: 50px;
}
</style>